<template>
   <div>
        <div id="top-line">
          <!-- <img id="logo-img" src="../assets/image/logoo.png" alt=""> -->
            <h2 id="logo_title">云隐</h2>
            <div id="nav-search-box">
                <input id="nav-search" type="text" placeholder="歌名，专辑">
               <router-link :to="{path:'/yunyin/white',query:{keyword:keyword}}"><span class="serachimg" @click="search">&#xe67c;</span></router-link>
            </div>
           <router-link to='/yunyin/user'> <img id="headimg" src="../assets/image/headimg.jpg" alt="">
            <span id="top-name">{{name}}</span></router-link>
            <span class="smallset">&#xe604;</span>
            <span class="smallset">&#xe6ed;</span>
            <span class="smallset">&#xe618;</span>
        </div>
   </div>
</template>

<script>
import axios from 'axios'
import white from '../components/search/white.vue'
export default {
  name: 'topline',
  components:{
      white,
  },
data(){
    return{
        keyword:'',
        name:'',
    }
},
mounted:function(){
    this.load();
},

methods:{
    search(){
      this.keyword=document.getElementById("nav-search").value;
    },
    load(){
                let that=this;
                axios.get("http://39.101.203.189:3000/user/detail?uid="+ that.$store.state.id).then(function(response) {
                        console.log(response.data);
                        ('撤冷Saleng'==response.data.profile.nickname)?that.name='撒冷才不是小小蒙':that.name=response.data.profile.nickname;
                    }, function(err) {})
            } ,
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
a{
    text-decoration: none;
    z-index: 100000;
}
#logo-img{
  position: absolute;
  top: 15px;
  left: 50px;
    width: 50px;
     height: 50px;
     background-color: #fff;
}
#logo_title {
     position: relative;
     font-size: 36px;
     transform: translate(-50%, -50%);
     top: 13%;
     left: 5em;
     z-index: 100;
     color: #fff;
     display: inline-block;
     cursor: default;
 }
  #top-line {
     position: relative;
     top: -10px;
     left: -20px;
     width: 102%;
     height: 80px;
     margin: 10px;
     background-color: #1b0508;
 }
 
 #nav-search-box {
     position: absolute;
     top: 50%;
     left: 510px;
     width: 300px;
     height: 35px;
     outline: none;
     border: 2px solid #777576;
     transform: translate(-50%, -50%);
     border-radius: 8px 8px 8px 8px;
     background-color: #2c2324;
 }
 
 #nav-search {
     position: relative;
     top: 50%;
     left: 45%;
     width: 250px;
     height: 25px;
     outline: none;
     border: none;
     color: #fff;
     transform: translate(-50%, -50%);
     background-color: transparent;
     z-index: 100000;
 }
 
 .serachimg {
     font-family: "iconfont" !important;
     position: relative;
     left: 10px;
     top: 5px;
     font-size: 18px;
     color: aliceblue;
     opacity: 0.7;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     cursor: default;
     transition: 0.5s;
 }
 
 .serachimg:hover {
     font-size: 15px;
 }
 
 #headimg {
     position: relative;
     top:-3px;
     left: 800px;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     background-color: #fff;
     outline: none;
     float: none;
     display: inline-block;
 }
 
 #top-name {
     position: relative;
     top: -20px;
     left: 830px;
     max-width: 180px;
     color: aliceblue;
 }
 
 .smallset {
     position: relative;
     top: -16px;
     left: 880px;
     margin-right: 30px;
     font-family: "iconfont" !important;
     font-size: 25px;
     color: aliceblue;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     cursor: default;
 }
</style>